<template>
  <view class="wrap">
    <view class="logo">工单管理系统</view>
    <view>
      <view class="list">
        <view class="list-call">
          <view
            class="iconfont icon-avatar"
            style="font-size: 22px; color: #5473e8"
          ></view>
          <input
            class="u-input"
            type="text"
            v-model="username"
            maxlength="32"
            :placeholder="$t('login.placeholderAccount')"
          />
        </view>
        <view class="list-call">
          <view
            class="iconfont icon-key"
            style="font-size: 22px; color: #5473e8"
          ></view>
          <input
            class="u-input"
            type="text"
            v-model="password"
            maxlength="32"
            :placeholder="$t('login.placeholderPassword')"
            :password="!showPassword"
          />
          <image
            class="u-icon-right"
            :src="
              '/static/aidex/login/eye_' +
              (showPassword ? 'open' : 'close') +
              '.png'
            "
            @click="showPass()"
          ></image>
        </view>
      </view>
      <view class="button" @click="submit()"><text>登录</text></view>
      <!-- <view class="login-bottom-box">
				<u-divider> 更多登录方式 </u-divider>
				<view class="oauth2">
					<u-icon class="u-icon" size="100" color="#36c956" name="weixin-circle-fill" @click="wxLogin">
					</u-icon>
					<u-icon class="u-icon" size="100" color="#23a0f0" name="qq-circle-fill" @click="qqLogin"></u-icon>
				</view>
			</view> -->
    </view>
  </view>
</template>
<script>
import base64 from '@/common/base64.js'
export default {
  data() {
    return {
      username: '',
      password: '',
      showPassword: false,
    }
  },
  onLoad() {
    let token = uni.getStorageSync('sgkj_token')
    if (token) {
      this.$u.api.getHomeCount().then((res) => {
        if (res.code == '200') {
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/sys/msg/index',
            })
          }, 500)
        }
      })
    }
  },
  methods: {
    showPass() {
      this.showPassword = !this.showPassword
    },
    submit() {
      if (this.username.length == 0) {
        this.$u.toast('请输入账号')
        return
      }
      if (this.password.length == 0) {
        this.$u.toast('请输入密码')
        return
      }
      this.$u.api
        .login({
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          if (res.code == '200') {
            console.log('submit')
            uni.setStorageSync('sgkj_token', res.token)
            this.$u.api.getUserInfo().then((response) => {
              if (response.code == '200') {
                console.log(response.user, 'userInfo')
                uni.setStorageSync('sgkj_userInfo', response.user)
              }
            })
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/sys/msg/index',
              })
            }, 500)
          }
        })
    },
    wxLogin(res) {
      this.$u.toast('微信登录')
    },
  },
}
</script>
<style lang="scss">
@import 'index.scss';
.uni-input-placeholder {
  font-size: 14px;
}
.uni-input-input {
  font-size: 16px;
}
.logo {
  width: 80%;
  font-size: 64rpx;
  color: #5473e8;
  margin: 80rpx auto 80rpx auto;
}

.list-call-icon {
  color: #ff0000;
}

.currentPhone-box {
  text-align: center;
  padding: 40rpx 80rpx;

  .number-text {
    color: #000000;
    font-size: 60rpx;
  }

  .other-text {
    color: #999999;
    font-size: 26rpx;
    padding: 20rpx 0;
  }

  .u-btn {
    margin: 30rpx auto;
  }

  .u-hairline-border {
    border: 1px solid #fff;
  }
}

.register {
  display: inline-block;
  color: #5473e8;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  float: right;
  margin-top: 6rpx;
}

.register-link {
  float: right;
  padding: 0 16rpx;
}

.reg-link {
  display: inline-block;
  color: #5473e8;
}

.oauth2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 0rpx 100rpx 30rpx;

  image {
    height: 80rpx;
    width: 80rpx;
  }
}

.u-tabs {
  padding: 0 70rpx;
}
</style>
